<template>
  <div class="home">
    <el-container :style="{height: 100 + 'vh' }">
      <el-menu background-color="#304156" text-color="#fff" active-text-color="#09F7F7" default-active="1"
               class="el-menu-vertical-demo" :collapse="isCollapse" unique-opened router :default-active="$route.path">
        <div>
          <div class="biaoti" v-if="check">
            <span style="font-size: 18px;color: black">用户信息管理系统</span>
          </div>
          <div class="biaoti" v-else>
            <span style="font-size: 18px;color: black">用户</span>
          </div>
        </div>
        <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
          <template slot="title">
            <i :class="item.icon" style="color: #fff"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <el-menu-item-group v-for="(items,index) in item.submenu" :key="index">
            <el-menu-item :index="items.to" style="margin-top: -13px;">{{items.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <el-container>
        <el-header>
          <div class="icons" @click="toggleCollapse">
            <i class="el-icon-s-unfold" v-if="isCollapse"></i>
            <i class="el-icon-s-fold" v-else></i>
          </div>
          <div class="headerRight">
            <span style="padding: 18px;">欢迎，<span style="color: blue;">{{user}}</span></span>
            <el-dropdown @command="setDialogInfo">
						<span class="el-dropdown-link">
						<span class="titles">用户设置</span>
						<i class="el-icon-arrow-down el-icon--right" style="color: #000000;font-size: 18px;"></i>
						</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <div class="mainContent">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import menu from "../config/menu-config.js"
  export default {
    name: 'Home',
    data() {
      return {
        isCollapse: false,
        user:"",
        check:true,
        menu:menu,
        breadlist: []
      };
    },
    mounted() {
      let user=sessionStorage.getItem("user");
      this.user=user;
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse;
        if(this.isCollapse===false){
          this.check=true;
        }else{
          this.check=false;
        }
      },
      // 下拉框选择，点击个人信息后调整到对应的函数执行
      setDialogInfo(comItem) {
        switch (comItem) {
          case "info":
            this.showInfoList();
            break;
          case "logout":
            this.logout();
            break;
        }
      },
      //展示个人信息
      showInfoList() {
        this.$alert(
                `<div>
						名称：${this.user}
						<br/>
						身份：管理员
				  </div>`,
                '个人名片', {
                  dangerouslyUseHTMLString: true
                });
      },
      logout(){
        this.$confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击确定的操作(调用接口)
          window.localStorage.clear();
          this.$router.push('/login')
        }).catch(() => {
          return;
        });
      },
    }
  }
</script>
<style scoped="scoped">
  .titles{
    font-size: 20px;
    color: #000;
  }

  .headerRight{
    font-size: 20px;
    position: absolute;
    right: 15px;
  }
  .mainContent{
    overflow-y: scroll;
    height: 100vh;
    padding: 15px;
  }
  ::-webkit-scrollbar{
    display:none;
  }
  .biaoti{
    background-color: #42B983;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-header{
    background-color: cyan;
    color: #333;
    line-height: 60px;
    display: flex;
    float: left;
    padding: 0 !important;
  }
  .el-header i {
    font-size: 25px;
  }

  .icons {
    width: 25px;
    height: 60px;
    padding: 0 20px;
    text-align: center
  }
  .icons:hover {
    background: rgb(248, 248, 248);
    transition: 1s;
    cursor: pointer;
  }
</style>
